<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">Treeview</view>
			<view class="tui-page__desc">树型菜单：可收起展开，自定义内容，图标等。根据约定的数据结构传入数据即可。</view>
		</view>
		<view class="tui-page__bd">
			<tui-tree-view :treeData="treeData" @click="onClick"></tui-tree-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				treeData: [{
					text: 'ThorUI',
					value: 1,
					src: '/static/components/treeview/folder.png',
					activeSrc: '/static/components/treeview/folder_open.png',
					collapsed: false,
					children: [{
						text: 'tui-actionsheet',
						value: 100,
						src: '/static/components/treeview/folder.png',
						activeSrc: '/static/components/treeview/folder_open.png',
						collapsed: false,
						children: [{
							text: 'tui-actionsheet.html',
							value: 100100,
							src: '/static/components/treeview/html.png'
						}, {
							text: 'tui-actionsheet.js',
							value: 100200,
							src: '/static/components/treeview/js.png'
						}, {
							text: 'tui-actionsheet.css',
							value: 100300,
							src: '/static/components/treeview/css.png'
						}, {
							text: 'tui-actionsheet.json',
							value: 100400,
							src: '/static/components/treeview/json.png'
						}]
					}, {
						text: 'tui-alert',
						value: 200,
						src: '/static/components/treeview/folder.png',
						activeSrc: '/static/components/treeview/folder_open.png',
						children: [{
							text: 'tui-alert.html',
							value: 200100,
							src: '/static/components/treeview/html.png'
						}, {
							text: 'tui-alert.js',
							value: 200200,
							src: '/static/components/treeview/js.png'
						}, {
							text: 'tui-alert.css',
							value: 200300,
							src: '/static/components/treeview/css.png'
						}, {
							text: 'tui-alert.json',
							value: 200400,
							src: '/static/components/treeview/json.png'
						}]
					}, {
						text: 'tui-badge',
						value: 300,
						src: '/static/components/treeview/folder.png',
						activeSrc: '/static/components/treeview/folder_open.png',
						children: [{
							text: 'tui-badge.html',
							value: 300100,
							src: '/static/components/treeview/html.png'
						}, {
							text: 'tui-badge.js',
							value: 300200,
							src: '/static/components/treeview/js.png'
						}, {
							text: 'tui-badge.css',
							value: 300300,
							src: '/static/components/treeview/css.png'
						}, {
							text: 'tui-badge.json',
							value: 300400,
							src: '/static/components/treeview/json.png'
						}]
					}, {
						text: 'tui-pagination',
						value: 400,
						src: '/static/components/treeview/folder.png',
						activeSrc: '/static/components/treeview/folder_open.png',
						children: [{
							text: 'tui-pagination.html',
							value: 400100,
							src: '/static/components/treeview/html.png'
						}, {
							text: 'tui-pagination.js',
							value: 400200,
							src: '/static/components/treeview/js.png'
						}, {
							text: 'tui-pagination.css',
							value: 400300,
							src: '/static/components/treeview/css.png'
						}, {
							text: 'tui-pagination.json',
							value: 400400,
							src: '/static/components/treeview/json.png'
						}]
					}, {
						text: 'tui-waterfall',
						value: 500,
						src: '/static/components/treeview/folder.png',
						activeSrc: '/static/components/treeview/folder_open.png',
						children: [{
							text: 'tui-waterfall.html',
							value: 500100,
							src: '/static/components/treeview/html.png'
						}, {
							text: 'tui-waterfall.js',
							value: 500200,
							src: '/static/components/treeview/js.png'
						}, {
							text: 'tui-waterfall.css',
							value: 500300,
							src: '/static/components/treeview/css.png'
						}, {
							text: 'tui-waterfall.json',
							value: 500400,
							src: '/static/components/treeview/json.png'
						}]
					}, {
						text: 'tui-tabbar',
						value: 600,
						src: '/static/components/treeview/folder.png',
						activeSrc: '/static/components/treeview/folder_open.png',
						children: [{
							text: 'tui-tabbar.html',
							value: 600100,
							src: '/static/components/treeview/html.png'
						}, {
							text: 'tui-tabbar.js',
							value: 600200,
							src: '/static/components/treeview/js.png'
						}, {
							text: 'tui-tabbar.css',
							value: 600300,
							src: '/static/components/treeview/css.png'
						}, {
							text: 'tui-tabbar.json',
							value: 600400,
							src: '/static/components/treeview/json.png'
						}]
					}, {
						text: 'tui-switch',
						value: 700,
						src: '/static/components/treeview/folder.png',
						activeSrc: '/static/components/treeview/folder_open.png',
						children: [{
							text: 'tui-switch.html',
							value: 700100,
							src: '/static/components/treeview/html.png'
						}, {
							text: 'tui-switch.js',
							value: 700200,
							src: '/static/components/treeview/js.png'
						}, {
							text: 'tui-switch.css',
							value: 700300,
							src: '/static/components/treeview/css.png'
						}, {
							text: 'tui-switch.json',
							value: 700400,
							src: '/static/components/treeview/json.png'
						}]
					}, {
						text: 'tui-picker',
						value: 800,
						src: '/static/components/treeview/folder.png',
						activeSrc: '/static/components/treeview/folder_open.png',
						children: [{
							text: 'tui-picker.html',
							value: 800100,
							src: '/static/components/treeview/html.png'
						}, {
							text: 'tui-picker.js',
							value: 800200,
							src: '/static/components/treeview/js.png'
						}, {
							text: 'tui-picker.css',
							value: 800300,
							src: '/static/components/treeview/css.png'
						}, {
							text: 'tui-picker.json',
							value: 800400,
							src: '/static/components/treeview/json.png'
						}]
					}]
				}]
			}
		},
		methods: {
			onClick(e) {
				console.log(e)
				this.tui.toast(`您点击了：${e.text}`)
			}
		}
	}
</script>

<style></style>
